<template>
  <div class="palybar">
        <div class="SongDetails">
            <span class="songName">{{music_data.songName}}</span> <span class="singerName">{{music_data.singerName}}</span>
        </div>
       <audio :src="music_url" ref="audio" @play='PlayState'></audio>
    <div class="barbg">
      <div class="play">
        <span class="bar"></span>
      </div>
       <div class="playtime">
         <span class="currentTime">00:00</span>&nbsp;/&nbsp;<span class="SumTime" v-text="sunTime"></span>
        </div>
    </div>
     
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "FooterPlay",
  data(){
     return {
         music_data:'',
         music_url:'http://m8.music.126.net/20210901115259/abdec59f6b110cad774489981f9b6c47/ymusic/obj/w5zDlMODwrDDiGjCn8Ky/2460288329/d473/85ae/a219/68fe952247bfa841fca24c045e16ba5c.mp3',
         sunTime:'00:00',
         playOrder:'loop'
        
        
     }
  },
  methods:{
     PlayState(){
         this.$bus.$emit('PlayState','pauselogo');
            
     },
     
  
    
    

  },
  mounted() {
     this.$bus.$on('play_replace', (el) => {
             
              this.$refs.audio.loop = el;
      })
     this.$bus.$on('play_order', (el) => {
            this.playOrder = el;
     })         
        
      
    var audio = document.querySelector("audio");
    var play = document.querySelector(".play");
    var barbg = document.querySelector(".barbg");
    var bar = document.querySelector(".bar");
    var currentTime = document.querySelector('.currentTime')
    var SumTime =document.querySelector('.SumTime')

    //  封装一个移动进度条函数
    var move = function (el) {
      if (el.target != bar) {
        play.style.width =
          (el.offsetX / barbg.offsetWidth).toFixed(2) * 100 + "%";
      }
    };

     // 将当前播放位置的时间格式化
    var audioMove =  () => {
        
      play.style.width = (audio.currentTime / audio.duration) * 100 + "%";
       var s =  Math.round(audio.currentTime) % 60;
        s =  s >= 10? s: '0' + s;
      var  m = Math.floor( Math.round(audio.currentTime) / 60);
        m = m >= 10? m: '0' + m;
       currentTime.innerHTML = m + ':' + s
       
      songTime(audio.duration);
        this.$bus.$emit('playTime', audio.currentTime)

        // play_order
        if (audio.ended) {
         
             switch (this.playOrder) {
               case 'loop':
             
                 this.$bus.$emit('NextSong','loop')
                 break;
               case 'random':
             
                 this.$bus.$emit('NextSong','random')     
                 break
               default:
                 break;
             }


        }
       
     };   

      

   

   

      var SongUrl = () => {
            axios.get('http://localhost:8080/api/song/url',{
            params:{
              id:this.music_data.id
            }
          }).then( response => {
              // audio.pause()
             this.music_url = response.data.data[0].url;
                   
              this.$nextTick(function(){
               
                   audio.play();
                  
              })
            
          });
   
      }
       

       //  当音乐播放时，开始监听
        var autoPlay = function () {
      audio.addEventListener("timeupdate", audioMove);
    };
    autoPlay();
   
    //  将歌曲的时间格式化
    function songTime (data){
      if (audio.duration) {
         var s =  Math.round(data) % 60;
        s =  s >= 10? s: '0' + s;
       var  m = Math.floor( Math.round(data) / 60);
        m = m >= 10? m: '0' + m;
        SumTime.innerHTML = m + ':' + s
      }
       
    }
     
        // 初次获取当前歌曲的时间并格式化
      if (audio.duration) {
     
        songTime(audio.duration)
    } 
    
    //  点击进度条移动到播放的位置
    barbg.addEventListener("mousedown", function (el) {
      if (el.target != bar) {
           audio.pause()
        play.style.width = (el.offsetX / barbg.offsetWidth) * 100 + "%";

        audio.currentTime = (el.offsetX / barbg.offsetWidth) * audio.duration;
         setTimeout(function(){
               SongUrl()
             
             
         },100)
         
      }
    });

     //  点击并移动 来改变播放的位置
    bar.addEventListener("mousedown", function () {
      barbg.addEventListener("mousemove", move);
      audio.removeEventListener("timeupdate", audioMove);
      barbg.addEventListener("mouseleave", function () {
        barbg.removeEventListener("mousemove", move);
        play.style.width = (audio.currentTime / audio.duration) * 100 + "%";
      });
    });
    // 鼠标松开，解除移动事件
    bar.addEventListener("mouseup", function () {
      barbg.removeEventListener("mousedown", move);
      audio.currentTime =
        (play.offsetWidth / barbg.offsetWidth) * audio.duration;
         
         audio.pause()

     
      setTimeout( () =>{
       SongUrl()

      },100)
    });
     // 将播放与暂停功能传给其它组件
    this.$bus.$on('PlayAndSuspend', (data) =>{
       if (data) {
         SongUrl()
 
       }else{
         audio.pause()
       }
    })
      // 将歌曲列表中需要播放的音乐数据传递过来
      this.$bus.$on('music_details', (el)  => {
          
              this.music_data = el;
               
               this.$nextTick(function(){
                 
                  SongUrl();
               })
              
         }) 
           
     // 调整音量
     
      this.$bus.$on('volumeSize', (el) =>{
          this.$refs.audio.volume = el
      })
            
               
      
     
     
  },
};
</script>

<style scoped>
  .SongDetails {
      text-align: left;
     padding: 12px 0 4px 0;
    color: #fff;
  } 
 
.barbg {
  position: relative;
  
  width: 466px;
  height: 9px;

  background: url(../images/statbar.png) no-repeat 0 -30px;
  border-radius: 14px;
  background: black;
}
.play {
  position: absolute;
  top: 0;
  max-width: 100%;
  min-width: 0;
  width: 0;
  height: 9px;
  background: url(../images/statbar.png) no-repeat 0 -65px;
  border-radius: 14px;
}
.bar {
  position: absolute;
  top: -7px;
  right: -12px;
  width: 22px;
  height: 24px;
  background: url(../images/iconall.png) no-repeat 0 -250px;
  z-index: 1;
}
.palybar {
    float: left;
    width: 580px;
    height: 37px;
    color: #fff;
}

.playtime {
  position: absolute;
    top: -3px;
    right: -88px;
    color: #797979;
}
.songName {
  margin: 0 8px 0 0;
}
.singerName {
  color: #9b9b9b;
}
</style>